<include file="Public:header"/>

<div class="banner">
    <div class="carousel">
		<figure>
			<volist name="banner_index" id="b">
				<img src="{$b.url}" alt="{$b.title}" onclick="gotourl('{$b.to_url}')">
			</volist>
		</figure>
		<nav>
			<button class="nav prev">Prev</button>
			<button class="nav next">Next</button>
		</nav>
	</div>
</div>
<div class="box">
    <div class="box_m">
        <div class="show">
            <div class="left show_l">
				最新视频
            </div>
            <div class="right show_r">
                <volist name="cp_sort" id="s" >
                    <a href="{:U('Index/pro_list',array(cp_sort_id=>$s['id']))}">{$s.title}</a>
                </volist>
            </div>
            <div class="clear"></div>
        </div>
        <div class="show_cp">
            <div class="show_cp_box" id="show_cp_box">
                <div class="box_li1">
                    <volist name="cp_index" id="i">
                    	<a href="{:U('Index/pro_content',array(cp_id=>$i['id']))}">
	                    	<div class="show_cp_1_box">
	                    		<div class="show_cp_1">
		                            <video src="{$i.url}" alt="{$i.title}"></video>                            	
		                        </div>
		                        <div class="show_cp_1_text">
		                        	{$i.title}
		                        </div>
	                    	</div>
                        </a>
                    </volist>
                    <div class="clear"></div>
                </div>
                <div class="box_li2">

                </div>

            </div>

            <div class="clear"></div>
        </div>
    </div>
    
</div>


<script type="text/javascript">
	'use strict';

	window.addEventListener('load', function () {
		var carousels = document.querySelectorAll('.carousel');

		for (var i = 0; i < carousels.length; i++) {
			carousel(carousels[i]);
		}
	});

	function carousel(root) {
		var figure = root.querySelector('figure'),
			nav = root.querySelector('nav'),
			images = figure.children,
			n = images.length,
			gap = root.dataset.gap || 0,
			bfc = 'bfc' in root.dataset,
			theta = 2 * Math.PI / n,
			currImage = 0;

		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		window.addEventListener('resize', function () {
			setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		});

		setupNavigation();

		function setupCarousel(n, s) {
			var apothem = s / (2 * Math.tan(Math.PI / n));

			figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

			for (var i = 0; i < n; i++) {
				images[i].style.padding = gap + 'px';
			}for (i = 1; i < n; i++) {
				images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
				images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
			}
			if (bfc) for (i = 0; i < n; i++) {
				images[i].style.backfaceVisibility = 'hidden';
			}rotateCarousel(currImage);
		}

		function setupNavigation() {
			nav.addEventListener('click', onClick, true);

			function onClick(e) {
				e.stopPropagation();

				var t = e.target;
				if (t.tagName.toUpperCase() != 'BUTTON') return;

				if (t.classList.contains('next')) {
					currImage++;
				} else {
					currImage--;
				}

				rotateCarousel(currImage);
			}
		}

		function rotateCarousel(imageIndex) {
			figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
		}
	}
	function gotourl(t){
		window.location.href=t;
	}
</script>

<include file="Public:bottom"/>